<div id="vue_form" class="container" style="text-align: center;height:100px">
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-9">
            <input id="vue_form_input" type="text" class="form-control input-lg" placeholder="输入内容">
        </div>
        <div class="col-md-1">
            <button id="vue_form_btn" type="submit" class="btn btn-default input-lg">搜索</button>
        </div>
    </div>
</div>
<div id="vue_linux_cmd_content" class="container hidden">
    <div class="col-md-6">
        <table class="table table-hover">
            <h4>命令列表
                <a style="cursor: pointer;" data-toggle="tooltip" data-placement="right" title="添加命令" onmouseover="$('[data-toggle=\'tooltip\']').tooltip()">
                    <span class="glyphicon glyphicon-plus" @click="add"></span>
                </a>
            </h4>
            <thead>
            <tr>
                <th>命令</th>
                <th>描述</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in items" onmouseover="changeDesc(this)">
                <td hidden>{{index}}</td>
                <td>{{item.key}}</td>
                <td>{{item.cmdDesc}}</td>
                <td>
                    <button type="button" class="btn btn-default btn-sm" @click="edit(index)">
                        <span class="glyphicon glyphicon-edit"></span>编辑
                    </button>
                    <button type="button" class="btn btn-default btn-sm" @click="del(item.key)">
                        <span class="glyphicon glyphicon-remove-sign"></span>删除
                    </button>
                </td>
            </tr>
            </tbody>
        </table>

        <page total="" pagesize="5" onPageChange="dosomething"></page>

    </div>
    <div class="col-md-2"></div>
    <div class="col-md-4">
        <div class="panel panel-success">
            <div class="panel-heading">
                <h3 class="panel-title">操作说明：</h3>
            </div>
            <div class="panel-body">
                {{detailsInfo.cmd}}
            </div>
            <table class="table">
                <tr><td>命令描述：</td><td>{{detailsInfo.cmdDesc}}</td></tr>
                <tr><td>示例：</td><td>{{detailsInfo.example}}</td></tr>
                <tr><td>示例描述：</td><td>{{detailsInfo.exampleDesc}}</td></tr>
            </table>
        </div>
    </div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="dialogModal" tabindex="-1" role="dialog" aria-labelledby="dialogModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="dialogModalLabel">
                    新增一个命令
                </h4>
            </div>
            <div class="modal-body">
                <form id="modal_form_id" class="form-horizontal" role="form">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">命令key</label>
                        <div id="key_input_id" class="col-sm-10" data-placement="top" data-content="必须输入key">
                            <input name="key" class="form-control" id="key" type="text" v-model='detailCmd.key' v-bind:readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">命令</label>
                        <div class="col-sm-10">
                            <input name="cmd" class="form-control" id="cmd" type="text" v-model='detailCmd.cmd'>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">命令操作描述</label>
                        <div class="col-sm-10">
                            <input name="cmdDesc" class="form-control" id="cmdDesc" type="text" v-model='detailCmd.cmdDesc'>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">示例</label>
                        <div class="col-sm-10">
                            <input name="example" class="form-control" id="example" type="text" v-model='detailCmd.example'>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">示例描述</label>
                        <div class="col-sm-10">
                            <input name="exampleDesc" class="form-control" id="exampleDesc" type="text" v-model='detailCmd.exampleDesc'>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="_dynamicGeneration_modal_close" type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button v-if="btn_type=='save'" type="button"  class="btn btn-primary" @click="save">
                    新增
                </button>
                <button v-else type="button" class="btn btn-primary" @click="update">
                    更新
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script type="text/javascript">
    var vm_cmd_list;
    var curPage;
    var pagesize = 5;//每页显示条数
    var isActiveQC = false;//是否激活查询条件
    $.post(
        'linux/linuxCmdQuery',
        {"pagesize":pagesize},
        function(result){
            vm_cmd_list = new Vue({
                el:"#vue_linux_cmd_content",
                data: {
                    items:result.data
                    ,detailsInfo:result.data[0]
                }
                ,methods:{
                    add:function(){
                        modal_vue.detailCmd = {};//重置模态框 form
                        modal_vue.btn_type = "save";
                        modal_vue.readonly = false;
                        $('#dialogModal').modal('show');
                    }
                    ,del:function(key){
                        var keyword = $("#vue_form_input").val();
                        $.post(
                            'linux/linuxCmdDel',
                            {'key':key},
                            function(result){
                                if(result.success=='ok'){
                                    MsgAlert.info("删除成功！",true);
                                    sendQuery();
                                }else{
                                    MsgAlert.warn("删除失败！",true);
                                }
                            }
                            ,"json"
                        );
                    }
                    ,edit:function(index){
                        modal_vue.detailCmd = vm_cmd_list.items[index];
                        modal_vue.readonly = true;
                        modal_vue.btn_type = "update";
                        $('#dialogModal').modal('show');
                    }
                }
            });
            $("#vue_form").attr("class","container show");
            $("#vue_linux_cmd_content").attr("class","container show");
            $("page").attr("total",result.total);//设置分页组件总条数
            $("page").attr("pagesize",pagesize);//设置分页组件每页显示条数
        }
        ,"json"
    );

    var modal_vue = new Vue({
        el:"#dialogModal"
        ,data:{
            detailCmd:{
                key:"",
                cmd:"",
                cmdDesc:"",
                example:"",
                exampleDesc:""
            }
            ,btn_type:""
            ,readonly:false
        }
        ,methods:{
            save:function(){
                var param = modal_vue.detailCmd;
                if(param.key==null||param.key==""){
                    $('#key_input_id').popover('show');
                    return;
                }
                $.post("linux/linuxCmdAdd",param,
                    function(result){
                        if(result.success=='ok'){
                            MsgAlert.info("保存成功！",true);
                        }
                        else {
                            MsgAlert.warn(result.msg);
                        }
                    }
                    ,"json");
            }
            ,update:function(){
                var param = modal_vue.detailCmd;
                $.post("linux/linuxCmdUpdate",param,
                    function(result){
                        if(result.success=='ok'){
                            MsgAlert.info("更新成功！",true);
                        }
                        else {
                            MsgAlert.warn(result.msg);
                        }
                    }
                    ,"json");
            }
        }
    });

    $("#vue_form_btn").click(function(e){
        setConditionActive();
        sendQuery();
    });

    /**
     * 设置查询条件是否激活，分页按钮点击时是否携带查询条件
     **/
    function setConditionActive(){
        var keyword = $("#vue_form_input").val();
        if(keyword!=null&&keyword!=undefined&&keyword!=""){
            isActiveQC = true;
        }else{
            isActiveQC = false;
        }
    }

    function sendQuery(curPage){
        curPage = curPage|0;
        var keyword = $("#vue_form_input").val();
        keyword = isActiveQC?keyword:"";
        $.post(
            'linux/linuxCmdQuery',
            {'keyword':keyword,"curPage":curPage,"pagesize":pagesize},
            function(result){
                if(result.data.length>0){
                    vm_cmd_list.items = result.data;
                    vm_cmd_list.detailsInfo = result.data[0];
                    $("page").attr("total",result.total);//设置分页组件数据总条数
                    $("#vue_linux_cmd_content").attr("class","container show");
                }else{
                    $("#vue_linux_cmd_content").attr("class","container hide");
                    MsgAlert.warn("没有相关数据！",true);
                }
            }
            ,"json"
        );
    }

    function changeDesc(e){
        var tr = e.firstChild;
        vm_cmd_list.detailsInfo = vm_cmd_list.items[tr.innerText];
    }

    /**
     * 分页组件回调函数
     * page 为当前点击页码
     * @param page
     */
    function dosomething(page){
        //因为后台根据页码计算偏移量(pagesize*page)
        //所以将当前点击页面减一，即为偏移量
        curPage = page-1;
        sendQuery(curPage);
    }


</script>
<script src="../../js/jquery-2.1.1.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<script src="../../js/lai.page.js"></script>